<template>
  <view class="p-[20rpx]">
    <view class="text-[32rpx] font-bold text-center mb-[40rpx]">云函数测试</view>
    
    <!-- 配置说明 -->
    <view class="bg-blue-50 border border-blue-200 rounded-[20rpx] p-[30rpx] mb-[30rpx]">
      <view class="text-[28rpx] font-semibold text-blue-600 mb-[20rpx]">配置说明</view>
      <view class="text-[24rpx] text-blue-700 mb-[10rpx]">
        • 云环境ID: cloud1-0gy0oubu178f2550
      </view>
      <view class="text-[24rpx] text-blue-700 mb-[10rpx]">
        • 云函数: test (需要先在微信开发者工具中部署)
      </view>
      <view class="text-[24rpx] text-blue-700">
        • 部署方法: 右键 cloudfunctions/test → 上传并部署
      </view>
    </view>
    
    <view class="bg-white rounded-[20rpx] p-[30rpx] mb-[30rpx]">
      <view class="text-[28rpx] font-semibold mb-[20rpx]">测试云函数调用</view>
      <view class="text-[24rpx] text-gray-600 mb-[30rpx]">
        点击下方按钮测试云函数功能
      </view>
      
      <button 
        @click="testCloudFunction" 
        :disabled="loading"
        class="w-full bg-[#3d8944] text-white py-[20rpx] rounded-[10rpx] text-[28rpx]"
        :class="{ 'opacity-50': loading }"
      >
        {{ loading ? '调用中...' : '调用测试云函数' }}
      </button>
    </view>

    <view v-if="result" class="bg-white rounded-[20rpx] p-[30rpx]">
      <view class="text-[28rpx] font-semibold mb-[20rpx]">调用结果</view>
      <view class="bg-gray-100 p-[20rpx] rounded-[10rpx]">
        <view class="text-[24rpx] text-gray-800 mb-[10rpx]">
          <text class="font-semibold">状态:</text> {{ result.success ? '成功' : '失败' }}
        </view>
        <view class="text-[24rpx] text-gray-800 mb-[10rpx]">
          <text class="font-semibold">消息:</text> {{ result.message }}
        </view>
        <view class="text-[24rpx] text-gray-800 mb-[10rpx]">
          <text class="font-semibold">时间:</text> {{ result.data?.currentTime }}
        </view>
        <view class="text-[24rpx] text-gray-800 mb-[10rpx]">
          <text class="font-semibold">用户ID:</text> {{ result.data?.userOpenId?.substring(0, 10) }}...
        </view>
        <view class="text-[24rpx] text-gray-800 mb-[10rpx]">
          <text class="font-semibold">输入参数:</text> {{ JSON.stringify(result.data?.inputParams) }}
        </view>
        <view class="text-[24rpx] text-gray-800">
          <text class="font-semibold">时间戳:</text> {{ result.timestamp }}
        </view>
      </view>
    </view>

    <view v-if="error" class="bg-red-50 border border-red-200 rounded-[20rpx] p-[30rpx] mt-[30rpx]">
      <view class="text-[28rpx] font-semibold text-red-600 mb-[20rpx]">错误信息</view>
      <view class="text-[24rpx] text-red-700 mb-[10rpx]">{{ error }}</view>
      <view class="text-[20rpx] text-red-600">
        请检查：1. 云函数是否已部署 2. 云环境ID是否正确 3. 网络连接是否正常
      </view>
    </view>

    <!-- 调试信息 -->
    <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] mt-[30rpx]">
      <view class="text-[28rpx] font-semibold mb-[20rpx]">调试信息</view>
      <view class="text-[24rpx] text-gray-600 mb-[10rpx]">
        云开发状态: {{ cloudStatus }}
      </view>
      <view class="text-[24rpx] text-gray-600">
        最后调用时间: {{ lastCallTime || '未调用' }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { cloudService } from '@/utils/cloud'
import Taro from '@tarojs/taro'

const loading = ref(false)
const result = ref<any>(null)
const error = ref<string>('')
const cloudStatus = ref<string>('未初始化')
const lastCallTime = ref<string>('')

onMounted(async () => {
  try {
    await cloudService.initCloud()
    cloudStatus.value = '已初始化'
  } catch (err: any) {
    cloudStatus.value = '初始化失败'
    error.value = err.message || '云开发初始化失败'
  }
})

const testCloudFunction = async () => {
  loading.value = true
  error.value = ''
  result.value = null
  lastCallTime.value = new Date().toLocaleString()

  try {
    const response = await cloudService.testFunction({
      testParam: '这是来自前端的测试参数',
      randomNumber: Math.random(),
      timestamp: Date.now()
    })
    
    result.value = response
    Taro.showToast({
      title: '云函数调用成功',
      icon: 'success',
      duration: 2000
    })
  } catch (err: any) {
    error.value = err.message || '云函数调用失败'
    Taro.showToast({
      title: '调用失败',
      icon: 'error',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}
</script> 